<template>
	<div class="app-container">
		<div class="bgWhite radius8 " :class="{'p25':orderNo == ''}">
			<div class="flex colo-top row-between">
				<div>
					<span class="fb fs18 mr20">订单编号：{{form.refundNumber}}</span>
				</div>
				<div class="mr20" :class="{'flex col-center':orderNo != ''}">
					<div class="fs14 color2">订单状态</div>
					<div class="fs20" :class="[{'mt20 ':orderNo == ''},{'ml10 ':orderNo != ''}]">
						<div class="flex col-center" :class="activeStatus(form.approvalStatus)">
							<span class="drop"></span>
							<dict-tag :options="bus_examine_status" :value="form.approvalStatus" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="bgWhite radius8 mt30">
			<div class="fb border-bottom plr30 pt20 pb20">
				流程进度
			</div>
			<div class="pt30 pb30">
				<progressGroup :array="progressLine"></progressGroup>
			</div>
		</div> -->
		<div class="bgWhite radius8 mt30">
			<div class="fb border-bottom plr30 pt20 pb20" v-if="orderNo == ''">
				详情
			</div>
			<div class="plr30  pb30">
				<div class="fb pt20 color333 pb20">
					退款信息
				</div>
				<div class="fs14" style="line-height: 45px;">
					<el-row class="border-bottom border-right border-left border-top">
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">退款金额</el-col>
						<el-col :span="6" class="border-right color2 pl20">{{form.refundAmount}}</el-col>
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">退款日期</el-col>
						<el-col :span="10" class="color2 pl20">{{form.submissionTime}}</el-col>
					</el-row>
					<el-row class="border-bottom border-right border-left">
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">退款方式</el-col>
						<el-col :span="6" class="border-right color2 pl20">
							{{setReturnType(form.refundType)}}
						</el-col>
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">关联客户</el-col>
						<el-col :span="10" class="color2 pl20">{{form.customerName}}</el-col>
					</el-row>
					<el-row class="border-bottom border-right border-left">
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">相关附件</el-col>
						<el-col :span="6" class="border-right color2 pl20">
							<a class="text-line-1 main-color cursor" target="_blank"
							:href="form.uploadAttachment"
							 style="width: 150px;">{{form.uploadAttachment}}</a>
						</el-col>
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">退款单号</el-col>
						<el-col :span="10" class="color2 pl20">{{form.logisticsTrackingNumber}}</el-col>
					</el-row>
					<el-row class="border-bottom border-right border-left">
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">退款描述</el-col>
						<el-col :span="6"
							class="border-right color2 pl20">{{form.supervisorApprovalRemark}}</el-col>
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb"></el-col>
						<el-col :span="10" class="color2 pl20"></el-col>
					</el-row>
				</div>
				<div class="fb pt30 pb20">
					审批信息
				</div>
				<div class="fs14" style="line-height: 45px;">
					<el-row class="border-bottom border-right border-left border-top">
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">提交人员</el-col>
						<el-col :span="6" class="border-right color2 pl20">{{form.submitterName}}</el-col>
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">审批状态</el-col>
						<el-col :span="10" class="color2 pl20">
							<dict-tag :options="bus_examine_status" :value="form.approvalStatus" />
						</el-col>
					</el-row>
					<el-row class="border-bottom border-right border-left">
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">1级审批</el-col>
						<el-col :span="6"
							class="border-right color2 pl20"></el-col>
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">2级审批</el-col>
						<el-col :span="10" class="color2 pl20"></el-col>
					</el-row>
					<el-row class="border-bottom border-right border-left">
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">提交时间</el-col>
						<el-col :span="6" class="border-right color2 pl20">{{form.supervisorApprovalTime}}</el-col>
						<el-col :span="4" class="border-right text-center bg-F5F7FA fb">审批时间</el-col>
						<el-col :span="10" class="color2 pl20">{{form.financialApprovalTime}}</el-col>
					</el-row>
				</div>
				<div class="text-center mt25 pb30" v-if="propItem.taskName == '主管审批'">
					<el-button type="defaultBtn" style="height: 38px;" @click="handleSuccess()">审批通过</el-button>
					<el-button type="operate" style="width: 88px;height: 38px;color: #FF001C;border-color: #FF001C;" 
					@click="handleError()">审批否决</el-button>
				</div>
				<div v-if="propItem.taskName == '财务审批'">
					<div class="fb pb20 mt30">
						操作记录
					</div>
					<div>
						<el-table v-loading="loading" :data="logList"  style="width: 100%" :header-row-style="{
								background: '#FAFAFA',
								color: '#0C1019',
								height: '54px',
							  }" :cell-style="{ height: '54px' }">
							<el-table-column label="时间" align="center" prop="time"/>
							<el-table-column label="节点" align="center" prop="node"/>
							<el-table-column label="操作人" align="center" prop="operator"/>
							<el-table-column label="操作内容" align="center" prop="operationContent"/>
							<el-table-column label="操作结果" align="center" prop="operationResult" />
						</el-table>
						<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
							v-model:limit="queryParams.pageSize" @pagination="getList" />
					</div>
					<div class="text-center mt30 pt20">
						<el-button type="defaultBtn" style="height: 38px;" @click="dialogVisible = true">退款确认</el-button>
					</div>
				</div>
			</div>	
		</div>
		<!-- 退款申请弹窗dialogApply -->
		<el-dialog title="退款确认" v-model="dialogVisible" width="730" center :before-close="handleClose">
			<div>
				<div>
					<el-form class="pt20 plr20" style="padding-bottom: 0;" :rules="rules" :model="form" ref="refForm"
						:inline="true">
						<el-form-item label="关联客户：" prop="customerName" style="margin-right: 18px;">
							<div class="color2" style="width: 195px;">
								<span>{{form.customerName}}</span>
							</div>
						</el-form-item>
						<el-form-item label="是否退货：" prop="refundType" style="margin-right: 0;">
							<el-radio-group v-model="form.refundType" >
								<el-radio disabled v-for="dict in returnType" :key="dict.value" :label="dict.value"
									:value="dict.value" size="large" style="margin-right: 15px;">
									{{dict.label}}
								</el-radio>
							</el-radio-group>
						</el-form-item>
						<div class="pb10">
							<div class="fs16 color333">
								<span class="color-red">*</span>
								<span class="fb mr20">退货商品</span>
							</div>
						</div>
						<div class="mt10 mb20">
							<el-table :data="form.commondityList" style="width: 100%;text-align: center;"
								:cell-style="{ textAlign: 'center','line-height':'54px'}"
								:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }"
								>
								<el-table-column prop="commondityName" label="商品名称" />
								<el-table-column prop="commondityUnit" label="商品单位">
									<template v-slot="scope">
										{{scope.row.commondityUnit}}
									</template>
								</el-table-column>
								<el-table-column label="商品价格" width="200px">
									<template #default="scope">
										<el-form-item prop="commondityPrice"
											style="margin-right: 0;margin-top: 18px;">
											<el-input type="number" disabled v-model="scope.row.commondityPrice" style="width: 120px"
												size="large"
												placeholder="请输入" />
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="退货数量" width="200px">
									<template #default="scope">
										<!-- :rules="rules.quantity" -->
										<el-form-item prop="commondityCount"
											style="margin-right: 0;margin-top: 18px;">
											<el-input type="number" disabled v-model="scope.row.commondityCount" style="width: 120px"
												size="large"
												placeholder="请输入" />
										</el-form-item>
									</template>
								</el-table-column>
								<!-- <el-table-column fixed="right" label="操作" align="center" 
									class-name="small-padding fixed-width">
									<template #default="scope">
										<el-button link style="color: red!important;" type="primary"
											@click="delGoods(scope.$index)">删除</el-button>
									</template>
								</el-table-column> -->
							</el-table>
						</div>
						<el-form-item label="退款金额" prop="refundAmount" style="margin-right: 22px;">
							<el-input disabled v-model="form.refundAmount" placeholder="请输入" clearable class="resetInput"
								style="width: 244px" />
						</el-form-item>
						<el-form-item label="涉及提成金额" prop="commissionAmount" style="margin-right: 0;">
							<el-input v-model="form.commissionAmount" placeholder="请输入" clearable class="resetInput"
								style="width: 225px" />
						</el-form-item>
						<el-form-item label="物流单号：" prop="logisticsTrackingNumber" >
							<div class="color2" style="width: 230px;">
								<span>{{form.logisticsTrackingNumber}}</span>
							</div>
						</el-form-item>
						<el-form-item label="业务经理：" prop="businessManager" style="margin-right: 0;">
							<div class="color2" style="width: 230px;">
								{{form.businessManagerName}}
							</div>
						</el-form-item>
						<el-form-item label="退款描述" prop="supervisorApprovalRemark">
							<el-input disabled size="large" type="textarea" resize="none" class="textReset" style="width: 630px;"
								:rows="5" v-model="form.supervisorApprovalRemark" placeholder="请输入退款描述" />
						</el-form-item>
						<el-form-item label="上传附件" prop="uploadAttachment">
							<!-- <div>
								<el-button class="cancelSubBtn" @click="">上传附件</el-button>
								<div>
									支持格式：.rar .zip .doc .docx .pdf .jpg等，单个文件不能超过20MB！
								</div>
							</div> -->
							<div>
								<div class="text-line-1 mr5" style="max-width: 500px;">
									<a class="main-color" :href="form.uploadAttachment" target="_blank">{{form.uploadAttachment}}</a>
								</div>
								<!-- <el-upload disabled name="file" :action="url" :headers="headers"
									:show-file-list="false" 
									:on-success="handleAvatarSuccess"
									:before-upload="beforeAvatarUpload"
									:file-list="fileList"
									:before-remove="beforeRemove"
									>
									<el-button class="cancelSubBtn">上传附件</el-button>
								</el-upload>
								<div class="flex col-center row-between" v-if="form.uploadAttachment">
									<div class="text-line-1 mr5" style="max-width: 500px;">
										<a class="main-color" :href="form.uploadAttachment" target="_blank">{{form.uploadAttachment}}</a>
									</div>
									<el-icon class="cursor color" @click="form.uploadAttachment = ''"><CircleClose /></el-icon>
								</div>
								<div>
									支持格式：.rar .zip .doc .docx .pdf .jpg等，单个文件不能超过20MB！
								</div> -->
							</div>
						</el-form-item>
					</el-form>
				</div>
				<div slot="footer" class="dialog-footer text-right mt30">
					<el-button class="cancelSubBtn" @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="handleAddRefund('refForm')" class="mainSubBtn">确 定</el-button>
				</div>
			</div>
		</el-dialog>
		<!-- 审核通过弹窗 -->
		<successPop ref="success" :item="propItem" @refresh="goBack()"></successPop>
		<!-- 审核拒绝弹窗 -->
		<errorPop ref="error" :item="propItem" @refresh="goBack()"></errorPop>
	</div>
</template>

<script>
	import {
		getUserListData //查业务经理
	} from "@/api/business/teamOpportunity";
	import {
		orderDetail, //详情
		approvalLog,//操作日志
	} from "@/api/business/order";
	import {
		refundDetail
	} from "@/api/business/refund"
	// import returnMoney from './components/returnMoney.vue'//回款信息弹窗
	import {
		receivedList, //回款列表
	} from "@/api/business/received";
	import progressGroup from '@/components/Progress/index.vue'
	import {
		getToken
	} from "@/utils/auth";
	let url = import.meta.env.VITE_APP_BASE_API + "/common/upload"
	import errorPop from './components/error.vue'//审核拒绝弹窗
	import successPop from './components/success.vue'//审核通过弹窗
	export default{
		components:{
			progressGroup,
			errorPop,
			successPop
			// returnMoney
		},
		props:{
			orderNo:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				headers: {
					Authorization: 'Bearer ' + getToken() // 这里的getToken方法需要你自己实现，用于获取你的Token
				},
				url: url,
				progressLine:[
					{
						id:1,
						name:'提交订单',						
					},
					{
						id:2,
						name:'1级审批',
					},
					{
						id:3,
						name:'2级审批',
					},
					{
						id:4,
						name:'审批完成',
					}
				],
				dialogVisible:false,
				returnType: [{
						value: 0,
						label: '全部退货'
					},
					{
						value: 1,
						label: '部分退货'
					},
					{
						value: 2,
						label: '无需退货'
					}
				], //退款类型
				bus_examine_status:this.useDict('bus_examine_status').bus_examine_status,
				bus_order_status:this.useDict('bus_order_status').bus_order_status,//订单状态
				bus_source:this.useDict('bus_source').bus_source,//订单来源
				bus_pay_type:this.useDict('bus_pay_type').bus_pay_type,//付款类型
				bus_pay_status:this.useDict('bus_pay_status').bus_pay_status,//付款方式	
				bus_logistics_type:this.useDict('bus_logistics_type').bus_logistics_type,	
				bus_product_specification_unit:this.useDict('bus_product_specification_unit').bus_product_specification_unit,//规格	
				list:[
					{}
				],			
				loading:false,
				form:{
					id:''
				},
				loading: false, // 遮罩层
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderNumber:'',
				},
				total:0,
				logList:[],
				type:0,//0:查看详情 1
				queryParams1: {
					pageNum: 1,
					pageSize: 10,
					relatedOrder:'',
				},//回款搜索
				list1:[],//回款列表
				teamOptions:[],
				returnType: [{
						value: 0,
						label: '全部退货'
					},
					{
						value: 1,
						label: '部分退货'
					},
					{
						value: 2,
						label: '无需退货'
					}
				], //退款类型
				propItem:[]
			}
		},
		created() {
			// this.type = this.$route.query.type ? this.$route.query.type : 0
			if(this.orderNo == ''){
				this.form.id = this.$route.query.id ? this.$route.query.id : ''
			}else{
				this.form.id = this.orderNo
			}
			this.propItem = this.$route.query.item ? JSON.parse(this.$route.query.item) : ''
			console.log(this.propItem,'this.propItem')
			this.getDetail()
		},
		methods:{
			//审批通过
			handleSuccess(){
				this.$refs.success.open()
			},
			//审核拒绝
			handleError(){
				this.$refs.error.open()
			},
			goBack(){
				this.$tab.closePage();
			},
			handleAvatarSuccess(e) {
				this.form.uploadAttachment = e.url
			},
			beforeAvatarUpload(e) {
				console.log(e, 'e2')
			},
			getDetail(){
				refundDetail(this.form.id).then(res=>{
					this.form = res.data
					this.getList()
					this.getUserList()
				})
			},
			setReturnType(val){
				for(let key in this.returnType){
					if(val*1 == this.returnType[key].value){
						return this.returnType[key].label
					}
				}
			},
			// 获取业务经理
			getUserList() {
				//获取自己和同部门的用户信息
				getUserListData().then(response => {
					this.teamOptions = response.data;
					for(let key in this.teamOptions){
						if(this.teamOptions[key].userId == this.form.businessManager){
							this.form.businessManagerName = this.teamOptions[key].userName
						}
					}
				});
			},
			//操作日志
			getList(){
				this.queryParams.orderNumber = this.form.id
				approvalLog(this.queryParams).then(res=>{
					this.logList = res.data
					this.loading = false
					this.getReceivedList()
				})
			},
			//回款列表
			getReceivedList(){
				this.queryParams1.relatedOrder = this.form.id
				receivedList(this.queryParams1).then((response) => {
					this.list1 = response.rows;
				})
			},
			// 编辑订单
			//编辑
			handleEdit(){
				this.$router.push('/order/orderAdd?id='+form.id)
			},
			// 财务确认
			handleAddRefund(){
				this.propItem.jbRefund.commissionAmount = this.form.commissionAmount
				this.$refs.success.open()
			}
		}
	}
</script>

<style>
</style>